<template>
  <div class="fittings">
    <img src="../../../../assets/binbing/AITOPageImg/peijian01.webp" />
    <div class="hr-12"></div>
    <img src="../../../../assets/binbing/AITOPageImg/peijian02.webp" />
    <div class="hr-12"></div>
    <div class="fittings_list">
      <div
        class="fittings_list_good"
        v-for="(item, index) in fitting"
        :key="index"
      >
        <div class="list_goodImg">
          <img :src="'../../../../../binbing/AITOPagePublic/peijian' + item.img" />
          <span class="label">
            {{ item.label }}
          </span>
        </div>
        <div class="list_goodMsg">
          <div class="goodsMsg_name">
            {{ item.name }}
          </div>
          <div class="goodsMsg_desc">
            {{ item.desc }}
          </div>
          <div class="goodsMsg_price">￥{{ item.price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Fittings",
  data() {
    return {
      fitting: [
        {
          img: "03.jpg",
          label: "隔热防晒车窗膜",
          name: "3M车窗膜",
          desc: "AITO汽车专享",
          price: 2880,
        },
        {
          img: "04.png",
          label: "AITO原车定制",
          name: "天窗冰甲(含服务)",
          desc: "安全防爆",
          price: 2680,
        },
        {
          img: "05.jpg",
          label: "隔热防晒车窗膜",
          name: "雷朋车窗膜",
          desc: "有效防晒",
          price: 1980,
        },
        {
          img: "06.png",
          label: "AITO原车定制",
          name: "屏幕保护膜(中控屏+仪表)",
          desc: "触控灵敏 | 裸屏质感",
          price: 398,
        },
      ],
    };
  },
};
</script>

<style scoped>
.fittings {
  width: 3.82rem;
  margin: auto;
}
.fittings > img {
  width: 3.82rem;
  height: 1.91rem;
}
.fittings_list {
  width: 3.82rem;
  height: 6.16rem;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
}
.fittings_list_good {
  width: 1.87rem;
  height: 3.04rem;
  background-color: #fff;
  border-radius: 0.08rem;
}
.list_goodImg {
  width: 1.87rem;
  height: 1.87rem;
  overflow: hidden;
  position: relative;
}
.list_goodImg > img {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.235rem;
  margin-left: 0.235rem;
}
.label {
  width: auto;
  height: auto;
  padding: 0 0.04rem;
  background-color: rgb(251, 231, 234);
  font-size: 0.09rem;
  color: rgb(207, 10, 44);
  border-radius: 4px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.list_goodMsg {
  width: 1.71rem;
  height: 0.98rem;
  padding: 0.08rem 0.08rem 0.12rem;
}
.goodsMsg_name {
  height: 0.36rem;
  font-size: 0.13rem;
  font-weight: bold;
  line-height: 0.18rem;
}
.goodsMsg_desc {
  height: 0.16rem;
  font-size: 0.12rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
}
.goodsMsg_price {
  height: 0.19rem;
  padding: 0.01rem 0;
  margin-top: 0.06rem;
  color: rgb(207, 10, 44);
  font-size: 0.16rem;
  font-weight: 600;
}

.hr-12 {
  height: 0.12rem;
}
</style>